<template>
  <div>
    <myPage></myPage>
    <div class="selfC">
      <el-form style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 25px;padding-bottom: 10px;background-color: #ffffff">
        <el-form inline style="display: flex;justify-content: space-around;height: 60px">
          <el-form-item label="您好，" icon="el-icon-search">
            <div>{{info.username}}</div>
          </el-form-item>
          <el-form-item>
            <div>
              <el-avatar  shape="circle" :size="60" style="background-color: #1ab2ff">{{info.username}}</el-avatar>
            </div>
          </el-form-item>
        </el-form>
        <el-divider content-position="left"><i class="el-icon-user-solid"></i>姓名</el-divider>
        <el-form-item>
          <div v-if="change.name">
            <span>{{info.name == null ? '暂未完善':info.name}}</span>
            <el-button :type="type" class="changeB" @click="changeInfo('name')">编辑</el-button>
          </div>
          <div v-else style="display: inline-block">
            <el-input  v-model="form.name" class="changeInput" @blur="confirm" placeholder="请输入姓名"></el-input>
            <el-button  :type="type" @click="confirm">确定</el-button>
            <el-button  :type="type" @click="cancel">取消</el-button>
          </div>
        </el-form-item>

        <el-divider content-position="left"><i class="el-icon-phone-outline"></i>电话</el-divider>
        <el-form-item>
          <div v-if="change.phone">
            <span>{{info.phone == null ? '暂未完善':info.phone}}</span>
            <el-button :type="type" class="changeB" @click="changeInfo('phone')">编辑</el-button>
          </div>
          <div v-else>
            <el-input v-model="form.phone" class="changeInput" placeholder="请输入手机号"></el-input>
            <el-button :type="type" @click="confirm">确定</el-button>
            <el-button :type="type">取消</el-button>
          </div>
        </el-form-item>

        <el-divider content-position="left"><i class="el-icon-postcard"></i>邮箱</el-divider>
        <el-form-item>
          <div v-if="change.email">
            <span>{{info.email==null?'暂未完善':info.email}}</span>
            <el-button :type="type" class="changeB" @click="changeInfo('email')">编辑</el-button>
          </div>
          <div v-else>
            <el-input v-model="form.email" class="changeInput" placeholder="请输入邮箱"></el-input>
            <el-button :type="type" @click="confirm">确定</el-button>
            <el-button :type="type">取消</el-button>
          </div>
        </el-form-item>

        <el-divider content-position="left"><i class="el-icon-location-information"></i>地址</el-divider>
        <el-form-item>
          <div v-if="change.address">
            <span>{{info.address==null?'暂未完善':info.address}}</span>
            <el-button :type="type" class="changeB" @click="changeInfo('address')">编辑</el-button>
          </div>
          <div v-else>
            <el-input v-model="form.address" class="changeInput" placeholder="请输入地址"></el-input>
            <el-button :type="type" @click="confirm">确定</el-button>
            <el-button :type="type">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import myPage from "@/components/my-page"
export default {
  name: "selfCenter",
  components:{myPage},
  data(){
    return{
      info:{},
      form:{
        name:'',
        phone:0,
        email:'',
        address:''
      },
      change:{
        name:true,
        phone:true,
        email:true,
        address:true
      },
      type:'text',
    }
  },
  beforeMount() {
    this.getSelf()
  },
  mounted() {
    // this.checkInfo();
    // this.getSelf();
  },
  methods:{
    checkInfo(){
      if (this.info.name == null){
        this.change.name = false
      }
      else if (this.info.phone == null){
        this.change.phone = false
      }
      else if (this.info.email == null){
        this.change.phone = false
      }
      else if (this.info.address == null){
        this.change.address = false
      }
    },
    getSelf(){
      var id = sessionStorage.getItem('id')
      this.axios.get('/api/getSelf',{
        params:{
          id:id
        }}
      ).then(res=>{
        this.info = res.data;
        this.form = res.data;
        console.log(this.info);
        this.checkInfo();
      }).catch(err=>{
        console.log(err);
      })
    },
    changeInfo(item){
      console.log(item)
      if(item === 'name'){
        this.change.name = false;
        this.change.address = true;
        this.change.email=true;
        this.change.phone=true
      }else if (item === 'phone'){
        this.change.phone = false;
        this.change.name = true;
        this.change.address = true;
        this.change.email=true;
      }else if(item === 'email'){
        this.change.email = false;
        this.change.name = true;
        this.change.address = true;
        this.change.phone=true;
      }else if (item === 'address'){
        this.change.address = false;
        this.change.name = true;
        this.change.name=true;
        this.change.email = true;

      }
    },
    confirm(){
      this.change.name = true;
      this.change.phone = true;
      this.change.email = true;
      this.change.address = true;
      console.log(this.form);
      this.axios.put('/api/setSelf',{...this.form}).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    cancel(item){
      console.log(item)
    }
  }
}
</script>

<style scoped>
  .selfC{
    width: 60%;
    margin: 20px auto 0;
    text-align: center;
    margin-bottom: 40px;
  }
  .changeInput{
    display: inline-block;
    width: 60%
  }
  .changeB{
    float: right;
  }
</style>
